<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>登录</title>
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/login/css/normalize.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/login/css/login.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/login/css/sign-up-login.css">
<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/login/css/inputEffect.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/login/css/tooltips.css" />
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/login/css/spop.min.css" />
<script src="${pageContext.request.contextPath }/static/login/js/jquery.min.js"></script>
<%--<script src="${pageContext.request.contextPath }/static/login/js/snow.js"></script>--%>
<script src="${pageContext.request.contextPath }/static/login/js/jquery.pure.tooltips.js"></script>
<script src="${pageContext.request.contextPath }/static/login/js/spop.min.js"></script>
<script>	
	(function() {
		// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
		if (!String.prototype.trim) {
			(function() {
				// Make sure we trim BOM and NBSP
				var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
				String.prototype.trim = function() {
					return this.replace(rtrim, '');
				};
			})();
		}

		[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
			// in case the input is already filled..
			if( inputEl.value.trim() !== '' ) {
				classie.add( inputEl.parentNode, 'input--filled' );
			}

			// events:
			inputEl.addEventListener( 'focus', onInputFocus );
			inputEl.addEventListener( 'blur', onInputBlur );
		} );

		function onInputFocus( ev ) {
			classie.add( ev.target.parentNode, 'input--filled' );
		}

		function onInputBlur( ev ) {
			if( ev.target.value.trim() === '' ) {
				classie.remove( ev.target.parentNode, 'input--filled' );
			}
		}
	})();
	
	$(function() {	
		$('#login #login-password').focus(function() {
			$('.login-owl').addClass('password');
		}).blur(function() {
			$('.login-owl').removeClass('password');
		});
		$('#login #register-password').focus(function() {
			$('.register-owl').addClass('password');
		}).blur(function() {
			$('.register-owl').removeClass('password');
		});
		$('#login #register-repassword').focus(function() {
			$('.register-owl').addClass('password');
		}).blur(function() {
			$('.register-owl').removeClass('password');
		});
		$('#login #forget-password').focus(function() {
			$('.forget-owl').addClass('password');
		}).blur(function() {
			$('.forget-owl').removeClass('password');
		});
	});
	
	function goto_register(){
		$("#register-username").val("");
		$("#register-password").val("");
		$("#register-repassword").val("");
		$("#register-code").val("");
		$("#tab-2").prop("checked",true);
	}
	
	function goto_login(){
		$("#login-username").val("");
		$("#login-password").val("");
		$("#tab-1").prop("checked",true);
	}
	
	function goto_forget(){
		$("#forget-username").val("");
		$("#forget-password").val("");
		$("#forget-code").val("");
		$("#tab-3").prop("checked",true);
	}
	
	function login(){//登录
		var username = $("#login-username").val(),
			password = $("#login-password").val(),
			type = $("#login-type").val(),
			validatecode = null,
			flag = false;
		if(type == '01'){
			if(username == ""){
				$.pt({
					target: $("#login-username"),
					position: 'r',
					align: 't',
					width: 'auto',
					height: 'auto',
					content:"学号不能为空"
				});
				flag = true;
			}
			if(password == ""){
				$.pt({
					target: $("#login-password"),
					position: 'r',
					align: 't',
					width: 'auto',
					height: 'auto',
					content:"密码不能为空"
				});
				flag = true;
			}
			var regExp = new RegExp("^[0-9]+.?[0-9]*$");
			if(!regExp.test(username)){
				$.pt({
					target: $("#login-username"),
					position: 'r',
					align: 't',
					width: 'auto',
					height: 'auto',
					content:"学号必须为数字"
				});
				flag = true;
			}
			if(username.length!=9){
				$.pt({
					target: $("#login-username"),
					position: 'r',
					align: 't',
					width: 'auto',
					height: 'auto',
					content:"学号必须9位"
				});
				flag = true;
			}
		}else{
			if(username == ""){
				$.pt({
					target: $("#login-username"),
					position: 'r',
					align: 't',
					width: 'auto',
					height: 'auto',
					content:"用户名不能为空"
				});
				flag = true;
			}else{
				if(password == ""){
					$.pt({
						target: $("#login-password"),
						position: 'r',
						align: 't',
						width: 'auto',
						height: 'auto',
						content:"密码不能为空"
					});
					flag = true;
				}
			}
		}

		if(flag){
			return false;
		}else{
			$.ajax({
				type:"post",
				url:"${pageContext.request.contextPath }/index/userSubmit/"+username+"/"+password+"/"+type,
				contentType:"application/json;charset=utf-8",
				async : false,
				success: function(data){
					if(data == '201'){
						spop({
							template: '<h5 class="spop-title">对不起，学号不存在，请重试！</h5>',
							position: 'top-center',
							style: 'error',
							autoclose: 3000
						});
						return false;
					}else if(data=='202'){
						spop({
							template: '<h5 class="spop-title">对不起，数据库错误，请重试！</h5>',
							position: 'top-center',
							style: 'error',
							autoclose: 3000
						});
						return false;
					}else if(data=='203'){
						spop({
							template: '<h5 class="spop-title">对不起，类型错误，请重试！</h5>',
							position: 'top-center',
							style: 'error',
							autoclose: 3000
						});
						return false;
					}else{
						var url="${pageContext.request.contextPath }/index/goLogin/"+data;
						window.location.href=url;
					}

				},
				error:function(data) {
					return false;
				},
			});
		}
	}
	
	//注册
	function register(){
		var username = $("#register-username").val(),
			password = $("#register-password").val(),
			repassword = $("#register-repassword").val(),
			type = $("#register-type").val(),
			flag = false,
			validatecode = null;
		if(type=='01') {
			if (username == "") {
				$.pt({
					target: $("#register-username"),
					position: 'r',
					align: 't',
					width: 'auto',
					height: 'auto',
					content: "学号不能为空"
				});
				flag = true;
			}
			if (password == "") {
				$.pt({
					target: $("#register-password"),
					position: 'r',
					align: 't',
					width: 'auto',
					height: 'auto',
					content: "密码不能为空"
				});
				flag = true;
			} else {
				if (password != repassword) {
					$.pt({
						target: $("#register-repassword"),
						position: 'r',
						align: 't',
						width: 'auto',
						height: 'auto',
						content: "两次输入的密码不一致"
					});
					flag = true;
				}
			}
			var regExp = new RegExp("^[0-9]+.?[0-9]*$");
			if (!regExp.test(username)) {
				$.pt({
					target: $("#register-username"),
					position: 'r',
					align: 't',
					width: 'auto',
					height: 'auto',
					content: "学号必须为数字"
				});
				flag = true;
			}
			if (username.length != 9) {
				$.pt({
					target: $("#register-username"),
					position: 'r',
					align: 't',
					width: 'auto',
					height: 'auto',
					content: "学号必须9位"
				});
				flag = true;
			}
		}else{
			if (username == "") {
				$.pt({
					target: $("#register-username"),
					position: 'r',
					align: 't',
					width: 'auto',
					height: 'auto',
					content: "用户名不能为空"
				});
				flag = true;
			}else{
				if (password == "") {
					$.pt({
						target: $("#register-password"),
						position: 'r',
						align: 't',
						width: 'auto',
						height: 'auto',
						content: "密码不能为空"
					});
					flag = true;
				} else {
					if (password != repassword) {
						$.pt({
							target: $("#register-repassword"),
							position: 'r',
							align: 't',
							width: 'auto',
							height: 'auto',
							content: "两次输入的密码不一致"
						});
						flag = true;
					}
				}
			}

		}
		if(flag){
			return false;
		}else{//注册
			$.ajax({
				type:"post",
				url:"${pageContext.request.contextPath }/index/register/"+username+"/"+password+"/"+type,
				contentType:"application/json;charset=utf-8",
				async : false,
				success: function(data){
					debugger
					if(data == '200'){
						spop({
							template: '<h4 class="spop-title">注册成功</h4>即将于3秒后返回登录',
							position: 'top-center',
							style: 'success',
							autoclose: 3000,
							onOpen : function(){
								var second = 2;
								var showPop = setInterval(function(){
									if(second == 0){
										clearInterval(showPop);
									}
									$('.spop-body').html('<h4 class="spop-title">注册成功</h4>即将于'+second+'秒后返回登录');
									second--;
								},1000);
							},
							onClose : function(){
								goto_login();
							}
						});
						return false;
					}else if(data=='201'){
						spop({
							template: '<h4 class="spop-title">对不起，学号重复，请重试！</h4>即将于3秒后返回登录',
							position: 'top-center',
							style: 'error',
							autoclose: 3000,
							onOpen : function(){
								var second = 2;
								var showPop = setInterval(function(){
									if(second == 0){
										clearInterval(showPop);
									}
									$('.spop-body').html('<h4 class="spop-title">对不起，学号重复，请重试！</h4>即将于'+second+'秒后返回登录');
									second--;
								},1000);
							},
							onClose : function(){
								goto_login();
							}
						});
						return false;
					}else{
						spop({
							template: '<h4 class="spop-title">注册失败！</h4>即将于3秒后返回登录',
							position: 'top-center',
							style: 'error',
							autoclose: 3000,
							onOpen : function(){
								var second = 2;
								var showPop = setInterval(function(){
									if(second == 0){
										clearInterval(showPop);
									}
									$('.spop-body').html('<h4 class="spop-title">注册失败！</h4>即将于'+second+'秒后返回登录');
									second--;
								},1000);
							},
							onClose : function(){
								goto_login();
							}
						});
						return false;
					}

				},
				error:function(data) {
					return false;
				},
			});
		}
	}


</script>
<style type="text/css">
html{width: 100%; height: 100%;}

body{

	background-repeat: no-repeat;

	background-position: center center #2D0F0F;

	background-color: #00BDDC;

	background-image: url("${pageContext.request.contextPath }/static/login/images/snow.jpg");

	background-size: 100% 100%;

}

.snow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100001; }

</style>
</head>
<body>
<!-- 雪花背景 -->
	<div class="snow-container"></div>
	<!-- 登录控件 -->
	<div id="login">
		<input id="tab-1" type="radio" name="tab" class="sign-in hidden" checked />
		<input id="tab-2" type="radio" name="tab" class="sign-up hidden" />
		<input id="tab-3" type="radio" name="tab" class="sign-out hidden" />
		<div class="wrapper">
			<!-- 登录页面 -->
			<div class="login sign-in-htm">
				<form class="container offset1 loginform">
					<!-- 猫头鹰控件 -->
					<div id="owl-login" class="login-owl">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<div class="pad input-container">
						<section class="content">
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="login-username" 
									autocomplete="off" placeholder="请输入用户名或学号" tabindex="1" maxlength="15" />
								<label class="input__label input__label--hideo" for="login-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" id="login-password" placeholder="请输入密码" tabindex="2" maxlength="15"/>
								<label class="input__label input__label--hideo" for="login-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<select class="input__field input__field--hideo" id="login-type">
									<option class="input__field input__field--hideo" style="height: 100px;" value="01">学生</option>
									<option class="input__field input__field--hideo" style="height: 100px;" value="02">管理员</option>
								</select>
								<label class="input__label input__label--hideo" for="login-password">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
						</section>
					</div>
					<div class="form-actions">
						<a tabindex="5" class="btn btn-link text-muted" onClick="goto_register()">注册</a>
						<input class="btn btn-primary" type="button" tabindex="3" onClick="login()" value="登录"
							style="color:white;"/>
					</div>
				</form>
			</div>
			<!-- 注册页面 -->
			<div class="login sign-up-htm">
				<form action="#" method="post" class="container offset1 loginform">
					<!-- 猫头鹰控件 -->
					<div id="owl-login" class="register-owl">
						<div class="hand"></div>
						<div class="hand hand-r"></div>
						<div class="arms">
							<div class="arm"></div>
							<div class="arm arm-r"></div>
						</div>
					</div>
					<div class="pad input-container">
						<section class="content">
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="text" id="register-username" 
									autocomplete="off" placeholder="请输入用户名或学号" maxlength="15"/>
								<label class="input__label input__label--hideo" for="register-username">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" id="register-password" placeholder="请输入密码" maxlength="15"/>
								<label class="input__label input__label--hideo" for="register-password">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<input class="input__field input__field--hideo" type="password" id="register-repassword" placeholder="请确认密码" maxlength="15"/>
								<label class="input__label input__label--hideo" for="register-repassword">
									<i class="fa fa-fw fa-lock icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
							<span class="input input--hideo">
								<select class="input__field input__field--hideo" id="register-type">
									<option class="input__field input__field--hideo" style="height: 100px;" value="01">学生</option>
									<option class="input__field input__field--hideo" style="height: 100px;" value="02">管理员</option>
								</select>
								<label class="input__label input__label--hideo" for="login-password">
									<i class="fa fa-fw fa-user icon icon--hideo"></i>
									<span class="input__label-content input__label-content--hideo"></span>
								</label>
							</span>
						</section>
					</div>
					<div class="form-actions">
						<a class="btn pull-left btn-link text-muted" onClick="goto_login()">返回登录</a>
						<input class="btn btn-primary" type="button" onClick="register()" value="注册" 
							style="color:white;"/>
					</div>
				</form>
			</div>
		</div>
	</div>
</body>
</html>
